<template>
  <div class="home">
    <div class="header">
      <div class="logo">
        <img :src="logoImg" alt="">
      </div>
      <div class="text">
        <span>欢迎“{{adminName}}”进入后台管理平台！</span>
      </div>
      <div class="user">
        <img :src="adminImg" alt="" id='adminImg'>
        <el-button class="exit" @click="exit" size="mini">退出</el-button>
      </div>
      
    </div>
    <div class="content">
      <div class="left">
        <order></order>
      </div>
      <div class="right">
          <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import order from './order'
export default {
  name: 'home',
  data () {
    return {
      logoImg:require('../assets/img/logo.png'),//logo图片
      adminName:"",//管理员姓名
      adminImg:"",//管理员头像
    }
  },
  methods:{
    getAdminInfo(){
      let _this = this;
      let api = '/api/admin/manager/find_detail';
      let sessionId = _this.$store.state.id;//获取token
      _this.axios({
        url:api,
        method: 'post',
        headers:{
          sessionId,
        }		
			}).then(res=>{
        //console.log('管理员信息',res);
        // _this.logoImg = res.data.bussData.avatorLink;//logo
        _this.adminName = res.data.data.bussData.userName;
        _this.adminImg = res.data.data.bussData.avatorLink;//管理员头像

        // if(_this.adminImg == ''){
        //   _this.adminImg = require('../assets/img/admin.svg')
        // }
        document.getElementById('adminImg').addEventListener('error',function(){
          _this.adminImg = require('../assets/img/admin.svg')
        })
        //console.log(_this.adminImg,'adminImg');
        if(_this.adminImg == undefined){
          _this.adminImg = require('../assets/img/admin.svg')
        }

        let data = {};
        data = res.data.data.bussData;//用户账号名
        // data = data.filter(item=>{
        //   return item.label != '全部'
        // });
        _this.$store.dispatch('saveAdminInfo',data);//缓存登录状态 

        // let menuData = res.data.data.bussData.menus;//获取侧边栏菜单
        // menuData.forEach(item => {
        //     item.label = item.menuName;
        //     // item.icon = 
        // });
        // //console.log('侧边栏菜单',menuData);


      });
    },
    // //获取所有一级分类
    // getAllClassOne(){
    //   let _this = this;
    //   let api = '/api/sysClassOne/find_list';
    //   let optionsOne = [];//清空   
    //   _this.axios.post(api).then(res=>{
    //     //console.log('所有的一级分类',res)
             
    //     let class1 = res.data.data.bussData;
    //     class1.forEach(item=>{
    //       let obj = {};
    //       obj.value = item.id;
    //       obj.label = item.chinaName;
    //       optionsOne.push(obj);
    //       // _this.form.class1Options.push(obj);
    //     });
    //     // //console.log('optionsOne',optionsOne);
    //     class1 = class1.filter(item=>{
    //       return item.label !='全部'
    //     });
    //     _this.$store.dispatch('saveClassOne',class1);//缓存所有一级分类
    //     //console.log('saveClassOne',optionsOne,_this.$store.state.classOneOptions);


    //   });
    // },
    // //获取所有二级分类
    // getAllClassTwo(){
    //   let _this = this;
    //   let api = '/api/sysClassTwo/find_list';
    //   let optionsTwo = [];//清空

    //   _this.axios.post(api).then(res=>{
    //     //console.log('所有的二级分类',res);
    //     let class2 = res.data.data.bussData;
    //     class2.forEach(item=>{
    //       let obj = {};
    //       obj.value = item.id;
    //       obj.label = item.chinaName;
    //       optionsTwo.push(obj);
    //     });
    //     optionsTwo = optionsTwo.filter(item=>{
    //       return item.label !='全部'
    //     });
    //     _this.$store.dispatch('saveClassTwo',optionsTwo);//缓存所有二级分类
    //     //console.log('classTwoOptions',optionsTwo,_this.$store.state.classTwoOptions);


    //   });
    // },
    // //获取所有角色
    // getAllRole(){
    //   let _this = this;
    //   let api = '/api/admin/role/find_list';
    //   let role = [];//清空

    //   _this.axios.post(api).then(res=>{
    //     //console.log('所有的角色可能值',res);
    //     let class2 = res.data.data.bussData;
    //     class2.forEach(item=>{
    //       let obj = {};
    //       obj.value = item.id;
    //       obj.label = item.roleName;
    //       role.push(obj);
    //     });
    //     role = role.filter(item=>{
    //       return item.label !='全部'
    //     });
    //     _this.$store.dispatch('saveRole',role);//缓存所有二级分类
    //     //console.log('role',role,_this.$store.state.role);

    //   });
    // },
    //退出登录
    exit(){
      let _this = this;
      _this.$store.dispatch('exitLogin');//缓存登录状态 
      _this.$router.push({
        path:"/"
      });
    }
  },
  mounted(){
    let _this = this;
    _this.getAdminInfo();//获取管理员信息
    // _this.getAllClassOne();//获取所有一级分类
    // _this.getAllClassTwo();//获取所有二级分类
    // _this.getAllRole();//获取所有角色
    
    // 跳转到默认第一个菜单下的单页面
    // //console.log(document.getElementsByClassName('el-tree-node')[0],'第一个node__children');
  },
  components:{
    order,
  }
}
</script>

<style scoped>
/* 整体样式 */
.home{
  height: 100%;
  width: 100%;
  position: relative;
  color: rgba(16, 16, 16, 1);
  overflow-x: hidden;
}
/* 所有的ul,li */
.home>>>ul,.home>>>li{
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 头部 */
.home>>>.header{
  display: flex;
  height: 19%;
}
.home>>>.header div{
  flex: 3;
}
/* 头部图片 */
.home>>>.header img{
  width: 12%;
  height: 6%;
}
/* logo */
.home>>>.header .logo{
  flex: 1;
}
.home>>>.header .logo img{
  position: absolute;
  top: 3%;
  left: 1%;
}
/* 文字 */
.home>>>.header .text{
  flex: 4;
}
.home>>>.header .text span{
  position: absolute;
  top: 4.5%;
  left: 15%;
}
/* 用户头像 */
.home>>>.header .user{
  flex: 1;
  height: 80%;
}
.home>>>.header .user img{
  position: absolute;
  top: 3%;
  right: 8%;
}
/* 退出登录按钮 */
.home>>>.exit{
  display: none;
  position: absolute;
  top: 4%;
  right: 8%;
}
.home>>>.user:hover .exit{
  display: block;
}
/* 内容 */
.home>>>.content{
  display: flex;
  width: 100%;
  height: 88%;
  position: absolute;
  top: 12%;

}
/* 左边 */
.home>>>.left{
  /* background-color: red; */
  flex: 1.3;
}
/* 右边 */
.home>>>.right{
  /* background-color: yellow; */
  flex: 8;
}
/* 所有的按钮 */
.home>>>.right .el-button{
  /* background-color: rgba(53, 174, 160, 1); */
  color: rgb(255, 255, 255,1);
}
</style>
